<?php
$db['server'] = 'localhost';
$db['user'] = 'root';
$db['password'] = '';
$db['name'] = 'theme_editor';

$editor = new Editor(1);

/**
 * The editor class that contains basic information and function for the editor to do its work.
 */
class Editor {
   public $width = 1024;
   public $height = 768;
   public $x = 80;
   public $y = 100;

   private $theme_id = -1;
   
   /**
    * Constructor.
    * It takes in the $theme_id that it is currently working on.
    */
   public function Editor($theme_id){
      $this->theme_id = $theme_id;
   }
   
   /**
    * loadIcon() generates portion of the javascript codes that loads the image of icons into the canvas.
    */
   public function loadIcon(){
      global $db;
      $conn = mysql_connect($db['server'],$db['user'],$db['password']);
      if(!$conn) die('Could not connect: ' . mysql_error());
      mysql_select_db($db['name'], $conn);

      $query = "SELECT * FROM te_icon WHERE icon_theme = " . $this->theme_id;

      $result = mysql_query($query);

      while($row = mysql_fetch_array($result)){
         ?>            canvasicon.addIcon(<?php echo $row['icon_id']; ?>,"<?php echo $row['icon_name']; ?>",<?php echo $row['icon_x']; ?>,<?php echo $row['icon_y']; ?>,<?php echo $row['icon_width']; ?>,<?php echo $row['icon_height']; ?>,"<?php echo $row['icon_image']; ?>");
<?php }

      mysql_close($conn);
   }
   
   /**
    * loadDataURL() extracts the image dataurl of the theme.
    */
   public function loadDataURL(){
      global $db;
      $conn = mysql_connect($db['server'],$db['user'],$db['password']);
      if(!$conn) die('Could not connect: ' . mysql_error());
      mysql_select_db($db['name'], $conn);

      $query = "SELECT theme_image FROM te_theme WHERE theme_id = " . $this->theme_id;
      $result = mysql_query($query);

      $row = mysql_fetch_array($result);
      echo $row['theme_image'];
      
      mysql_close($conn);
   }
   
   /**
    * loadIconMovement() extracts the iconmovement for the theme.
    */
   public function loadIconMovement(){
      global $db;
      $conn = mysql_connect($db['server'],$db['user'],$db['password']);
      if(!$conn) die('Could not connect: ' . mysql_error());
      mysql_select_db($db['name'], $conn);

      $query = "SELECT theme_iconmovement FROM te_theme WHERE theme_id = " . $this->theme_id;
      $result = mysql_query($query);

      $row = mysql_fetch_array($result);
      echo $row['theme_iconmovement'];
      
      mysql_close($conn);
   }

   /**
    * save() saves the dataurl and the icons information. Icons are passed in as array serialised by the javascript file.
    */
   public function save($dataurl,$icons,$iconmovement){
      global $db;
      $conn = mysql_connect($db['server'],$db['user'],$db['password']);
      if(!$conn) die('Could not connect: ' . mysql_error());
      mysql_select_db($db['name'], $conn);

      mysql_query("UPDATE te_theme SET theme_image='$dataurl' WHERE theme_id=" . $this->theme_id);

      foreach($icons as $icon){
         mysql_query("UPDATE te_icon SET icon_x=".$icon['x'].", icon_y=".$icon['y'].", icon_width=".$icon['width'].", icon_height=".$icon['height'].", icon_name='".$icon['name']."', icon_image='".$icon['src']."' WHERE icon_id=".$icon['id']." AND icon_theme=".$this->theme_id);
      }

      mysql_query("UPDATE te_theme SET theme_iconmovement='$iconmovement' WHERE theme_id=" . $this->theme_id);

      mysql_close($conn);
      echo "Saved";
   }
}

if(isset($_POST['image']) && isset($_POST['icons']) && isset($_POST['iconmovement'])){
   $iconstring = str_replace("\\","",$_POST['icons']);
   $icons = unserialize($iconstring);

   $editor->save($_POST['image'],$icons,$_POST['iconmovement']);
}else{

?><html>
   <head>
      <title>DESIGNER</title>
      <script type="text/javascript">
         <!-- Begin
         const CANVAS = {DRAW:"canvasDraw",ICON:"canvasIcon",TOOL:"canvasTool",SAVE:"canvasSave"};
         const DIMENSION = {X:<?php echo $editor->x;?>,Y:<?php echo $editor->y;?>,WIDTH:<?php echo $editor->width;?>,HEIGHT:<?php echo $editor->height;?>};
         const TOOL = {ERASER:0,PENCIL:1,BRUSH:2,ICONDRAG:3};

         var mouse={x:0,y:0,m:0,n:0};
         var pen={type:TOOL.PENCIL,color:"#000",width:0};
         var current={canvas:CANVAS.DRAW,mousedown:false,iconmovement:"<?php $editor->loadIconMovement(); ?>"};
         var icons = new Array();
         
         document.onmousemove = mouseMove;
         document.onmousedown = mouseDown;
         document.onmouseup = mouseUp;

         window.onload = function(){
            var canvases = document.getElementsByTagName('canvas');
            for (i in canvases) {
               disableSelection(canvases[i]);
            }
            var images = document.getElementsByTagName('img');
            for (i in images) {
               disableSelection(images[i]);
            }
            
            //##########- ADD ICON HERE (START) -##########//
            //canvasicon.addIcon(id,name,x,y,width,height,src);
<?php $editor->loadIcon(); ?>
            //##########- ADD ICON HERE  (END)  -##########//
            canvasdraw.load("<?php $editor->loadDataURL(); ?>");
            document.settings.iconmovement.value=current.iconmovement;
            
            canvasicon.refresh();
            action('pencil');
         };
         
         /**
          * action(command) method sets the pen that is being selected.
          */
         function action(command){
            if(command=="eraser"){
               current.canvas=CANVAS.DRAW;
               pen.type=TOOL.ERASER;
               pen.width=5;
            }else if(command=="pencil"){
               current.canvas=CANVAS.DRAW;
               pen.type=TOOL.PENCIL;
               pen.width=1;
            }else if(command=="brush"){
               current.canvas=CANVAS.DRAW;
               pen.type=TOOL.BRUSH;
               pen.width=5;
            }else if(command=="drag"){
               current.canvas=CANVAS.ICON;
               pen.type=TOOL.ICONDRAG;
               pen.width=5;
            }else if(command=="clear"){
               canvasdraw.clear();
            }else if(command=="save"){
               save();
            }else if(command=="null"){
            }
         }
         
         /**
          * Changes the color of the pen
          */
         function cColor(color){
            pen.color=color;
         }
         
         /**
          * This method is called everytime a mouse is clicked
          */
         function mouseDown(e){
            mouse.m = mouse.x;
            mouse.n = mouse.y;
            if(isInCanvas())
               current.mousedown=true;
            current.selectedicon=canvasicon.selectIcon();
            canvasicon.updateOffset();
            compute();
         }
         
         /**
          * Returns true if cursor is within boundary of canvas
          */
         function isInCanvas(){
            if(mouse.x<0) return false;
            if(mouse.y<0) return false;
            if(mouse.x>DIMENSION.WIDTH) return false;
            if(mouse.y>DIMENSION.HEIGHT) return false;
            return true;
         }
         
         /**
          * This method is called everytime a mouse click is released
          */
         function mouseUp(e){
            current.mousedown=false;
         }
         
         /**
          * This method is called everytime the mouse moves.
          */
         function mouseMove(e){
            mouse.m = mouse.x;
            mouse.n = mouse.y;
            mouse.x = e.pageX-DIMENSION.X;
            mouse.y = e.pageY-DIMENSION.Y;
            compute();
         }
         
         /**
          * computes the thing it needs to do based on the action set.
          */
         function compute(){
            canvastool.refresh();
            if(!current.mousedown)return;
            switch(pen.type){
               case TOOL.PENCIL:
               case TOOL.BRUSH:
                  canvasdraw.line(mouse.m,mouse.n,mouse.x,mouse.y,pen.width,pen.color);
                  break;
               case TOOL.ERASER:
                  canvasdraw.erase(mouse.x,mouse.y,pen.width)
                  break;
               case TOOL.ICONDRAG:
                  canvasicon.moveIcon();
            }
         }
         
         /**
          * *************************************************************************************
          * Object Literal (canvasdraw) stores necessary function related with the drawing canvas
          * *************************************************************************************
          */
         var canvasdraw = {
            //Draws a line from m,n to x,y
            line:function(m,n,x,y,width,color){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               c.beginPath();
               c.strokeStyle = color;
               c.lineWidth   = width*2;
               c.moveTo(m,n);
               c.lineTo(x,y);
               c.stroke();
               c.fillStyle=color;
               c.arc(m,n,width,0,Math.PI*2,true);
               c.arc(x,y,width,0,Math.PI*2,true);
               c.fill();
               c.closePath();
            },
            //Erase a square around x,y specified by width
            erase:function(x,y,width){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               c.beginPath();
               c.clearRect(x-width,y-width,width*2,width*2);
               c.fill();
               c.closePath();
            },
            //Clears entire canvas
            clear:function(){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               c.beginPath();
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
               c.fill();
               c.closePath();
            },
            //Loads the canvas with a image specified by the dataurl
            load:function(dataurl){
               var c = document.getElementById(CANVAS.DRAW).getContext("2d");
               var img = new Image();
               img.onload = function(){
                  c.width = DIMENSION.WIDTH;
                  c.height = DIMENSION.HEIGHT;
                  c.drawImage(img,0,0);
               };
               img.src = dataurl;
            },
            //Extracts the current dataurl representation of the image drawn on canvas
            dataurl:function(){
               var c=document.getElementById(CANVAS.DRAW);
               return c.toDataURL("image/png");
            }
         }
         
         /**
          * **********************************************************************************
          * Object Literal (canvasicon) stores necessary function related with the icon canvas
          * **********************************************************************************
          */
         var canvasicon = {
            //Refresh the current state of icon canvas. i.e:clears and redraws the icon canvas
            refresh:function(){
               var c = document.getElementById(CANVAS.ICON).getContext("2d");
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);

               for (i in icons){
                  canvasicon.drawIcon(icons[i]);
               }
            },
            //Draws the individual icon on the canvas. see the refresh function.
            drawIcon:function(icon){
               var c = document.getElementById(CANVAS.ICON).getContext("2d");
               var img = new Image();
               img.src = icon.src;
               c.drawImage(img,icon.x,icon.y,icon.width,icon.height);
            },
            //Adds a new icon into the icons array.
            addIcon:function(id,name,x,y,width,height,src){
               icon = {id:id,name:name,x:x,y:y,width:width,height:height,src:src};
               icons.push(icon);
            },
            //Returns the icons' array index that the cursor is hovering over.
            hoverIcon:function(){
               var list = new Array();
               for (i in icons){
                  if(mouse.x-icons[i].x<icons[i].width
                  && mouse.x-icons[i].x>0
                  && mouse.y-icons[i].y<icons[i].height
                  && mouse.y-icons[i].y>0){
                     list.push(i);
                  }
               }
               var tmp = list.pop();
               if(tmp>=0){
                  return tmp;
               }else{
                  return -1;
               }
            },
            //Sets the selected icon as the one that the cursor is hovering over. See hoverIcon function.
            selectIcon:function(){
               canvasicon.selected = canvasicon.hoverIcon();
            },
            //Updates the new position of the icons and redraws the icon canvas. See refresh function.
            updateIcon:function(iconIndex){
               icons[iconIndex].x=mouse.x-icons[iconIndex].offsetX;
               icons[iconIndex].y=mouse.y-icons[iconIndex].offsetY;
               canvasicon.refresh();
            },
            //Moves the icon to new position. See selected function.
            moveIcon:function(){
               canvasicon.updateIcon(canvasicon.selected);
            },
            //Updates the offset of the cursor and it's selected icon
            updateOffset:function(){
               try{
                  if(canvasicon.selected>=0){
                     icons[canvasicon.selected].offsetX=mouse.x-icons[canvasicon.selected].x;
                     icons[canvasicon.selected].offsetY=mouse.y-icons[canvasicon.selected].y;
                  }
               }catch(ex){
               }
            },
            //Variable to track the currently selected icon.
            selected:-1
            
         };
         
         /**
          * **********************************************************************************
          * Object Literal (canvastool) stores necessary function related with the tool canvas
          * **********************************************************************************
          */
         var canvastool = {
            //refresh the location of the tools.
            refresh:function(){
               var c = document.getElementById(CANVAS.TOOL).getContext("2d");
               c.clearRect(0,0,DIMENSION.WIDTH,DIMENSION.HEIGHT);
               switch(pen.type){
                  case TOOL.PENCIL:
                  case TOOL.BRUSH:
                     c.beginPath();
                     c.fillStyle=pen.color;
                     c.arc(mouse.x,mouse.y,pen.width,0,Math.PI*2,true);
                     c.fill();
                     c.closePath();
                     break;
                  case TOOL.ERASER:
                     c.beginPath();
                     c.fillStyle="#FFF";
                     c.fillRect(mouse.x-pen.width,mouse.y-pen.width,pen.width*2,pen.width*2);
                     c.fill();
                     c.strokeStyle = "#000";
                     c.lineWidth   = 1;
                     c.moveTo(mouse.x-pen.width,mouse.y-pen.width);
                     c.lineTo(mouse.x-pen.width,mouse.y+pen.width);
                     c.lineTo(mouse.x+pen.width,mouse.y+pen.width);
                     c.lineTo(mouse.x+pen.width,mouse.y-pen.width);
                     c.lineTo(mouse.x-pen.width,mouse.y-pen.width);
                     c.stroke();
                     c.closePath();
                     break;
                  case TOOL.ICONDRAG:
                     var w=2;
                     c.beginPath();
                     c.strokeStyle = "#000";
                     c.lineWidth   = w;
                     c.moveTo(mouse.x-pen.width,mouse.y);
                     c.lineTo(mouse.x+pen.width,mouse.y);
                     c.moveTo(mouse.x,mouse.y-pen.width);
                     c.lineTo(mouse.x,mouse.y+pen.width);
                     c.stroke();
                     c.closePath();
                     break;
                     
               }
               canvastool.highlightIcon();
            },
            //If in ICON Drag mode, highlights the icon.
            highlightIcon:function(){
               if(pen.type!=TOOL.ICONDRAG)return;
               
               var selected = -1;
               if(current.mousedown){
                  selected = canvasicon.selected;
               }else{
                  selected = canvasicon.hoverIcon();
               }

               if(selected<0)return;
               var c = document.getElementById(CANVAS.TOOL).getContext("2d");
               c.beginPath();
               c.strokeStyle = "#0FF";
               c.lineWidth   = 2;
               c.moveTo(icons[selected].x,icons[selected].y);
               c.lineTo(icons[selected].x+icons[selected].width,icons[selected].y);
               c.lineTo(icons[selected].x+icons[selected].width,icons[selected].y+icons[selected].height);
               c.lineTo(icons[selected].x,icons[selected].y+icons[selected].height);
               c.lineTo(icons[selected].x,icons[selected].y);
               c.stroke();

               c.fillStyle = "#0FF";
               c.fillRect( icons[selected].x , icons[selected].y + icons[selected].height - 10, icons[selected].width , 10);
               
               c.fillStyle = "#000";
               c.fillText(icons[selected].name, icons[selected].x , icons[selected].y + icons[selected].height - 1 , icons[selected].width );
               c.closePath();
               
            }
         };
         
         /**
          * save() function calls a script on the server and sends information to the server to be saved.
          */
         function save(){
            if (window.XMLHttpRequest)// code for IE7+, Firefox, Chrome, Opera, Safari
               xmlhttp=new XMLHttpRequest();
            else// code for IE6, IE5
               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

            xmlhttp.onreadystatechange=function(){
                                          if (xmlhttp.readyState==4 && xmlhttp.status==200){
                                             alert(xmlhttp.responseText);
                                          }
                                       };
            xmlhttp.open("POST","<?php echo $_SERVER['PHP_SELF'];?>",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("image="+encodeURIComponent(canvasdraw.dataurl())+"&icons="+serialize(icons)+"&iconmovement="+encodeURIComponent(current.iconmovement));
         }
         
         function changeIconMovement(element){
            current.iconmovement = element.value;
         }
         
         /**
          * disableSelection prevents canvas element from being highlighted easily.
          */
         function disableSelection(element) {
            if (typeof element.onselectstart != 'undefined') {
               element.onselectstart = function() { return false; };
            }/* else if (typeof element.style.MozUserSelect != 'undefined') {
               element.style.MozUserSelect = 'none';
            }*/ else {
               element.onmousedown = function() { return false; };
            }
         }

         /**
          * Serialise a Javascript Array into PHP Serialised Array.
          * Used when passing the icons array into the php script.
          *
          *  Returns a string representation of variable (which can later be unserialized)  
          *  
          *  version: 1006.1915
          *  discuss at: http://phpjs.org/functions/serialize
          *  +   original by: Arpad Ray (mailto:arpad@php.net)
          *  +   improved by: Dino
          *  +   bugfixed by: Andrej Pavlovic
          *  +   bugfixed by: Garagoth
          *  +      input by: DtTvB (http://dt.in.th/2008-09-16.string-length-in-bytes.html)
          *  +   bugfixed by: Russell Walker (http://www.nbill.co.uk/)
          *  +   bugfixed by: Jamie Beck (http://www.terabit.ca/)
          *  +      input by: Martin (http://www.erlenwiese.de/)
          *  +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
          *  -    depends on: utf8_encode
          *  %          note: We feel the main purpose of this function should be to ease the transport of data between php & js
          *  %          note: Aiming for PHP-compatibility, we have to translate objects to arrays
          *  *     example 1: serialize(['Kevin', 'van', 'Zonneveld']);
          *  *     returns 1: 'a:3:{i:0;s:5:"Kevin";i:1;s:3:"van";i:2;s:9:"Zonneveld";}'
          *  *     example 2: serialize({firstName: 'Kevin', midName: 'van', surName: 'Zonneveld'});
          *  *     returns 2: 'a:3:{s:9:"firstName";s:5:"Kevin";s:7:"midName";s:3:"van";s:7:"surName";s:9:"Zonneveld";}'
          */
         function serialize (mixed_value) {
             var _getType = function (inp) {
                 var type = typeof inp, match;
                 var key;
                 if (type == 'object' && !inp) {
                     return 'null';
                 }
                 if (type == "object") {
                     if (!inp.constructor) {
                         return 'object';
                     }
                     var cons = inp.constructor.toString();
                     match = cons.match(/(\w+)\(/);
                     if (match) {
                         cons = match[1].toLowerCase();
                     }
                     var types = ["boolean", "number", "string", "array"];
                     for (key in types) {
                         if (cons == types[key]) {
                             type = types[key];
                             break;
                         }
                     }
                 }
                 return type;
             };
             var type = _getType(mixed_value);
             var val, ktype = '';
             
             switch (type) {
                 case "function": 
                     val = ""; 
                     break;
                 case "boolean":
                     val = "b:" + (mixed_value ? "1" : "0");
                     break;
                 case "number":
                     val = (Math.round(mixed_value) == mixed_value ? "i" : "d") + ":" + mixed_value;
                     break;
                 case "string":
                     mixed_value = this.utf8_encode(mixed_value);
                     val = "s:" + encodeURIComponent(mixed_value).replace(/%../g, 'x').length + ":\"" + mixed_value + "\"";
                     break;
                 case "array":
                 case "object":
                     val = "a";
                     var count = 0;
                     var vals = "";
                     var okey;
                     var key;
                     for (key in mixed_value) {
                         ktype = _getType(mixed_value[key]);
                         if (ktype == "function") { 
                             continue; 
                         }
                         
                         okey = (key.match(/^[0-9]+$/) ? parseInt(key, 10) : key);
                         vals += this.serialize(okey) +
                                 this.serialize(mixed_value[key]);
                         count++;
                     }
                     val += ":" + count + ":{" + vals + "}";
                     break;
                 case "undefined": // Fall-through
                 default: // if the JS object has a property which contains a null value, the string cannot be unserialized by PHP
                     val = "N";
                     break;
             }
             if (type != "object" && type != "array") {
                 val += ";";
             }
             return val;
         }

         /**
          * Needed to be used by the serialize function.
          * 
          *  Encodes an ISO-8859-1 string to UTF-8  
          *  
          *  version: 1006.1915
          *  discuss at: http://phpjs.org/functions/utf8_encode
          *  +   original by: Webtoolkit.info (http://www.webtoolkit.info/)
          *  +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
          *  +   improved by: sowberry
          *  +    tweaked by: Jack
          *  +   bugfixed by: Onno Marsman
          *  +   improved by: Yves Sucaet
          *  +   bugfixed by: Onno Marsman
          *  +   bugfixed by: Ulrich
          *  *     example 1: utf8_encode('Kevin van Zonneveld');
          *  *     returns 1: 'Kevin van Zonneveld'
          */
         function utf8_encode ( argString ) {
             var string = (argString+''); // .replace(/\r\n/g, "\n").replace(/\r/g, "\n");
          
             var utftext = "";
             var start, end;
             var stringl = 0;
          
             start = end = 0;
             stringl = string.length;
             for (var n = 0; n < stringl; n++) {
                 var c1 = string.charCodeAt(n);
                 var enc = null;
          
                 if (c1 < 128) {
                     end++;
                 } else if (c1 > 127 && c1 < 2048) {
                     enc = String.fromCharCode((c1 >> 6) | 192) + String.fromCharCode((c1 & 63) | 128);
                 } else {
                     enc = String.fromCharCode((c1 >> 12) | 224) + String.fromCharCode(((c1 >> 6) & 63) | 128) + String.fromCharCode((c1 & 63) | 128);
                 }
                 if (enc !== null) {
                     if (end > start) {
                         utftext += string.substring(start, end);
                     }
                     utftext += enc;
                     start = end = n+1;
                 }
             }
          
             if (end > start) {
                 utftext += string.substring(start, string.length);
             }
          
             return utftext;
         }
         
         function dump(text){
            document.status.display.value=text;
         }
         
      </script>
   </head>
   <body>
      <table style="position:fixed;top:10px;left:80px;" cellspacing="0" border="0"><tr>
<?php
         $colorArrayA = array("#F0F8FF","#000000","#000080","#00008B","#0000CD","#0000FF","#006400","#008000","#008080","#008B8B","#00BFFF","#00CED1","#00FA9A","#00FF00","#00FF7F","#00FFFF",
                              "#00FFFF","#191970","#1E90FF","#20B2AA","#228B22","#2E8B57","#2F4F4F","#32CD32","#3CB371","#40E0D0","#4169E1","#4682B4","#483D8B","#48D1CC","#4B0082","#556B2F");
         $colorArrayB = array("#5F9EA0","#6495ED","#66CDAA","#696969","#6A5ACD","#6B8E23","#708090","#778899","#7B68EE","#7CFC00","#7FFF00","#7FFFD4","#800000","#800080","#808000","#808080",
                              "#87CEEB","#87CEFA","#8A2BE2","#8B0000","#8B008B","#8B4513","#8FBC8F","#90EE90","#9370D8","#9400D3","#98FB98","#9932CC","#9ACD32","#A0522D","#A52A2A","#A9A9A9");
         $colorArrayC = array("#ADD8E6","#ADFF2F","#AFEEEE","#B0C4DE","#B0E0E6","#B22222","#B8860B","#BA55D3","#BC8F8F","#BDB76B","#C0C0C0","#C71585","#CD5C5C","#CD853F","#D2691E","#D2B48C",
                              "#D3D3D3","#D87093","#D8BFD8","#DA70D6","#DAA520","#DC143C","#DCDCDC","#DDA0DD","#DEB887","#E0FFFF","#E6E6FA","#E9967A","#EE82EE","#EEE8AA","#F08080","#F0E68C");
         $colorArrayD = array("#F0FFF0","#F0FFFF","#F4A460","#F5DEB3","#F5F5DC","#F5F5F5","#F5FFFA","#F8F8FF","#FA8072","#FAEBD7","#FAF0E6","#FAFAD2","#FDF5E6","#FF0000","#FF00FF","#FF00FF",
                              "#FF1493","#FF4500","#FF6347","#FF69B4","#FF7F50","#FF8C00","#FFA07A","#FFA500","#FFB6C1","#FFC0CB","#FFD700","#FFDAB9","#FFDEAD","#FFE4B5","#FFE4C4","#FFE4E1");
                              //"#FFEBCD","#FFEFD5","#FFF0F5","#FFF5EE","#FFF8DC","#FFFACD","#FFFAF0","#FFFAFA","#FFFF00","#FFFFE0","#FFFFF0","#FFFFFF");

         foreach($colorArrayA as $color)
            echo '         <td width="20" height="20" bgcolor="' . $color . '" onclick="cColor(this.bgColor)"></td>'."\n";
         echo '      </tr><tr>'."\n";
         foreach($colorArrayB as $color)
            echo '         <td width="20" height="20" bgcolor="' . $color . '" onclick="cColor(this.bgColor)"></td>'."\n";
         echo '      </tr><tr>'."\n";
         foreach($colorArrayC as $color)
            echo '         <td width="20" height="20" bgcolor="' . $color . '" onclick="cColor(this.bgColor)"></td>'."\n";
         echo '      </tr><tr>'."\n";
         foreach($colorArrayD as $color)
            echo '         <td width="20" height="20" bgcolor="' . $color . '" onclick="cColor(this.bgColor)"></td>'."\n";
?>      </tr></table>
      

<?php /*      <form name="settings" style="position:fixed;top:430px;left:10px;"> */ ?>
      <form name="settings" style="position:fixed;top:10px;left:<?php echo 80 + (max(max(count($colorArrayA),count($colorArrayB)),max(count($colorArrayC),count($colorArrayD)))*22) + 10; ?>px;">
         <label for="iconmovement">Icon Movement:</label> <br/>
         <select name="iconmovement" onChange="changeIconMovement(this);">
            <option value="default">Default</option>
            <option value="bounce">Bounce</option>
            <option value="dance">Dance</option>
         </select>
      </form>

      <img src="image/pencil.png" alt="Pencil"    onclick="action('pencil')" style="position:fixed;top:10px;left:10px;"/> 
      <img src="image/brush.png"  alt="Brush"     onclick="action('brush')"  style="position:fixed;top:80px;left:10px;"/> 
      <img src="image/eraser.png" alt="Eraser"    onclick="action('eraser')" style="position:fixed;top:150px;left:10px;"/> 
      <img src="image/clear.png"  alt="Clear"     onclick="action('clear')"  style="position:fixed;top:220px;left:10px;"/> 
      <img src="image/drag.png"   alt="Drag Icon" onClick="action('drag')"   style="position:fixed;top:290px;left:10px;"/> 
      <img src="image/save.png"   alt="Save"      onclick="action('save')"   style="position:fixed;top:360px;left:10px;"/>
      
      <canvas id="canvasIcon" width="<?php echo $editor->width;?>" height="<?php echo $editor->height;?>" style="border:1px solid #c3c3c3;position:fixed;top:<?php echo $editor->y;?>px;left:<?php echo $editor->x;?>px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasDraw" width="<?php echo $editor->width;?>" height="<?php echo $editor->height;?>" style="border:1px solid #c3c3c3;position:fixed;top:<?php echo $editor->y;?>px;left:<?php echo $editor->x;?>px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasTool" width="<?php echo $editor->width;?>" height="<?php echo $editor->height;?>" style="border:1px solid #c3c3c3;position:fixed;top:<?php echo $editor->y;?>px;left:<?php echo $editor->x;?>px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      <canvas id="canvasSave" width="<?php echo $editor->width;?>" height="<?php echo $editor->height;?>" style="border:1px solid #c3c3c3;position:fixed;top:<?php echo $editor->y;?>px;left:<?php echo $editor->x;?>px;"> 
         Your browser  does not support the canvas element.
      </canvas>
      
      <form name="status" style="position:fixed;top:<?php echo $editor->height + $editor->y + 20;?>px;left:80px;">
      <textarea type="text" name="display"></textarea>
      </form>
   </body>
</html><?php }?>
